<template>
  <div class="dashboard-page">

    <!--该行各列的间距-->
    <Row :gutter="20">

      <Col :xs="24" :sm="24" :md="12" :lg="12" class="table11">

        <Row :gutter="20">
          <Col :xs="24" :sm="24" :md="12" :lg="12">
            <cardBar
                id="income"
                title="现金流入"
                :value="25134"
                prefix="￥"
                compare="1.08%"
                class="margin"
            />
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="12">
            <cardArea
                id="out"
                title="现金流出"
                :value="3456"
                status="down"
                compare="0.83%"
                class="margin"
            />
          </Col>
        </Row>

        <Row :gutter="20">
          <Col :xs="24" :sm="24" :md="12" :lg="12">
            <cardRadial
                id="order"
                title="收入确认"
                :value="35268"
                status="down"
                compare="6.13%"
                class="margin"
            />
          </Col>
          <Col :xs="24" :sm="24" :md="12" :lg="12">
            <cardLine
                id="users"
                title="应收账款"
                :value="13.68"
                :decimalPlaces="2"
                prefix="+"
                compare="10.68%"
                suffix="%"
                class="margin"
            />
          </Col>
        </Row>
      </Col>

      <Col :xs="24" :sm="24" :md="12" :lg="12" class="table11">
        <h2>现金流入</h2>
        <Table stripe :columns="columns1" :data="data1"></Table>
      </Col>
    </Row>



    <Row :gutter="20">
      <Col :xs="24" :sm="24" :lg="24" :xl="12" class="table11">
        <LineChart class="margin"/>
      </Col>
      <Col :xs="24" :sm="24" :md="12" :lg="6" class="table11">
        <h2>现金流出</h2>
        <Table stripe :columns="columns1" :data="data1"></Table>
      </Col>
      <Col :xs="24" :sm="24" :lg="8" :xl="6" class="table11">
        <h2>应收账款排行</h2>
        <Table stripe :columns="columns1" :data="data1"></Table>
      </Col>
    </Row>


    <Row :gutter="20">
      <Col :xs="24" :sm="24" :lg="24" :xl="12" class="table11">
        <bar class="margin"/>
      </Col>
      <Col :xs="24" :sm="24" :lg="8" :xl="6" class="table11">
        <h2>应收账款</h2>
        <Table stripe :columns="columns1" :data="data1"></Table>
      </Col>
      <Col :xs="24" :sm="24" :lg="8" :xl="6" class="table11">
        <h2>收入确认排行</h2>
        <Table stripe :columns="columns1" :data="data1"></Table>
      </Col>
    </Row>
<!--    <Row :gutter="20">-->
<!--      <Col :xs="24" :sm="24" :lg="24" :xl="16">-->
<!--        <mapCard class="margin"/>-->
<!--      </Col>-->
<!--      <Col :xs="24" :sm="24" :lg="24" :xl="8">-->
<!--        <radar class="margin"/>-->
<!--      </Col>-->
<!--    </Row>-->

  </div>
</template>

<script>
import cardInfo from "./components/cardInfo.vue";
import LineChart from "./components/line.vue";
import bar from "./components/bar.vue";
import mapCard from "./components/mapCard.vue";
import radar from "./components/radar.vue";
import cardBar from "./components/cardBar.vue";
import cardArea from "./components/cardArea.vue";
import cardRadial from "./components/cardRadial.vue";
import cardLine from "./components/cardLine.vue";
import cardButton from "./components/cardButton.vue";
import cardProgress from "./components/cardProgress.vue";
import orderTable from "./components/orderTable.vue";

export default {
  //tag标签
  name: "财务系统",
  components: {
    cardInfo,
    LineChart,
    bar,
    mapCard,
    radar,
    cardBar,
    cardArea,
    cardRadial,
    cardLine,
    cardButton,
    cardProgress,
    orderTable,
  },
  data() {
    return {
      icons: {
        icon1: require("@/assets/dashboard/fee.png"),
        icon2: require("@/assets/dashboard/department.png"),
        icon3: require("@/assets/dashboard/console.png"),
        icon4: require("@/assets/dashboard/user.png")
      },
      columns1: [
        {
          title: '产业单位',
          key: 'company'
        },
        {
          title: '现金流入',
          key: 'money'
        },
      ],
      data1: [
        {
          company: '山东省',
          money: 10000,
        },
        {
          company: '河北省',
          money: 12000,
        },
        {
          company: '河南省',
          money: 14000,
        },
        {
          company: '北京市',
          money: 16000,
        },
      ]
    };
  },
  methods: {
    init() {
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less" scoped>
.dashboard-page {
  .table11{
    border: 1px solid #e0e0e0;
  }
  .margin {
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 10px;
  }
}

</style>